<script src="app/controllers/admin/blogs/ListTopicController.js"></script>

<div class="hfr-loading" ng-class="{true:'hfr-showContent', false:''}[showViewContent]" ng-controller="AdminListTopicController">
	<div class="hfr-contentLoadingBar">
		<div id="dot1" class="loader-dot"></div>
		<div id="dot2" class="loader-dot"></div>
		<div id="dot3" class="loader-dot"></div>
	</div>
	<div class="hfr-loadingStatus">
		<!-- VIEW Admin List Topic
    	================================================== -->
    	<div id="hfr-adminListTopics" class="container hfr-margin-auto">
			<form class="hfr-adminFormListTopics">
				<h2 class="hfr-heading">Topics</h2>
				<div class="row">
				
					<!-- List topics -->
					<div class="col-md-6">
						<div class="row">
							<div class="col-md-8">
								<div class="input-group">
									<input type="text" class="form-control" placeholder="Search Topics" ng-model="searchTopic">
									<span class="input-group-addon ti-search"></span>
								</div>
							</div>
						</div>
						<hr />
						<div class="hfr-loading" ng-class="{true:'hfr-showContent', false:''}[showTopics]">
							<div class="hfr-contentLoadingBar">
								<div id="dot1" class="loader-dot"></div>
								<div id="dot2" class="loader-dot"></div>
								<div id="dot3" class="loader-dot"></div>
							</div>
							<div class="hfr-loadingStatus">
								<ul class="hfr-listTopics hfr-inputStyle">
									<li ng-repeat="topic in topics | filter:searchTopic">
										<input id="hfr-topic{{$index}}" type="checkbox" ng-change="changeSelect()" ng-model="checkTopics[topic.id]" value="{{topic.id}}">
										<label for="hfr-topic{{$index}}">{{topic.name}}</label>				

										<!-- <span class="hfr-icon ti-arrow-circle-down" ng-click="showSitemapOfTopic(topic.id)"></span> -->
										<a tooltip-append-to-body="true" tooltip-placement="top" tooltip="{{'static.siteManagement.viewSitemap' | translate}}" class="hfr-icon ti-align-left hfr-btnViewSitemap hfr-button-blue hfr-shrink" ng-click="showSitemapOfTopic(topic.id)" href></a>
										<a tooltip-append-to-body="true" tooltip-placement="top" tooltip="{{'static.layout.delete' | translate}}" class="hfr-icon ti-close hfr-button-red hfr-shrink" href></a>

										<div class="hfr-loading" ng-class="{true:'hfr-showContent', false:''}[showContentSitemapOfTopic[topic.id]]"  ng-show="showSitemapOfTopic[topic.id]">
											<div class="hfr-contentLoadingBar">
												<div id="dot1" class="loader-dot"></div>
												<div id="dot2" class="loader-dot"></div>
												<div id="dot3" class="loader-dot"></div>
											</div>
											<div class="hfr-loadingStatus">
												<div class="hfr-viewSitemap">
													<ul>
														<li ng-repeat="smtp in sitemapsOfTopics[topic.id]">
															<div class="hfr-featured">
																<input id="hfr-sitemap-1" name="hfr-sitemap-1" type="checkbox">
																<label for="hfr-sitemap-1"></label>
															</div>
															<a href="{{smtp.sitemapId}}" target="_blank">{{smtp.sitemapId}}</a>
														</li>
													</ul>
													<div class="content-center" ng-show="sitemapOfTopicShowPrev[topic.id] || sitemapOfTopicShowNext[topic.id]">
														<ul class="pager">				
															<li ng-class="{true:'active', false:'disabled'}[sitemapOfTopicShowPrev[topic.id]]" ng-click="prevSitemapOfTopicPage(topic.id)"><a href>&larr; Previous</a></li>
															<li ng-class="{true:'active', false:'disabled'}[sitemapOfTopicShowNext[topic.id]]" ng-click="nextSitemapOfTopicPage(topic.id)"><a href>Next &rarr;</a></li>
														</ul>
													</div>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<div class="pager">
							<div class="row">
								<div class="col-md-7">
									<div class="form-group">
										<input type="text" class="form-control" placeholder="Add Topic" ng-keypress="addTopic($event)" ng-model="topicName">
									</div>
								</div>
								<div class="col-md-3">
									<button class="hfr-button-blue hfr-solid hfr-button-small" type="submit">Add</button>
								</div>
							</div>
						</div>						
					</div>
					
					<!-- List sitemap -->
					<div class="col-md-6">
						<div class="row">
							<div class="col-md-12">
								<div class="input-group">
									<input type="text" class="form-control" placeholder="Search Sitemap" ng-keypress="searchSitemap($event)" ng-model="keyword">
									<span class="input-group-addon ti-search"></span>
								</div>
							</div>
						</div>
						<hr />
						
						<div class="hfr-loading" ng-class="{true:'hfr-showContent', false:''}[showSitemaps]">
							<div class="hfr-contentLoadingBar">
								<div id="dot1" class="loader-dot"></div>
								<div id="dot2" class="loader-dot"></div>
								<div id="dot3" class="loader-dot"></div>
							</div>
							<div class="hfr-loadingStatus">
								<ul class="hfr-listSite hfr-inputStyle">
									<li ng-repeat="sitemap in sitemaps">
										<div class="hfr-siteSelected">
											<input name="site-selected" id="hfr-sitemap{{$index}}" type="radio" ng-click="choiseSitemap(sitemap.url)" ng-model="sitemapOpt" value="{{sitemap.url}}">
											<label for="hfr-sitemap{{$index}}">
												{{sitemap.url}}
											</label>
											<div class="hfr-topicSelected">
												<span ng-repeat="tp in sitemap.topics">{{tp.id}} <span class="ti-close" ng-click="removeTopic(tp.id)"></span></span>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
						
						<div class="content-center" ng-show="sitemapShowPrev || sitemapShowNext">
							<ul class="pager">				
								<li ng-class="{true:'active', false:'disabled'}[sitemapShowPrev]" ng-click="prevSitemapPage()"><a href>&larr; Previous</a></li>
								<li ng-class="{true:'active', false:'disabled'}[sitemapShowNext]" ng-click="nextSitemapPage()"><a href>Next &rarr;</a></li>
							</ul>
						</div>
					</div>
				</div>
			</form>
		</div>
		<!-- =============== End view =============== -->
	</div>
</div>